<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>

<html lang="zh-cn">
    <head>
        <title>Hiring-首页</title>
         <%@ include file="/WEB-INF/views/common/import.jsp"%>
         <style>
        	.select {
        		height : 34px;
        		border: 1px solid #ccc;
        	}
        	.search-input {
        		width: 50% !important;
        		margin: 20px auto;
        	}
        </style>
    </head>
    <body>
    	<div class="container">
    		<%@ include file="/WEB-INF/views/common/header.jsp"%>
    		<div><h1 class="text-center">最近招聘职位</h1></div>
		<hr>
		<c:if test="${empty pageModel.list}">
	      		<div class="alert alert-warning text-center" role="alert">没有相关数据！</div>
	      	</c:if>
	      	<c:if test="${! empty pageModel.list}">
	      	  <form action="<%=request.getContextPath()%>/CommonServlet?command=toMainUI" method="POST" id="searchForm">
				    <div class="input-group search-input">
				       <input type="text" class="form-control" placeholder="职位名/公司名" id="searchText" name="searchText" value="${searchText }">
				       <span class="input-group-btn">
				         <button class="btn btn-primary" type="submit">搜索</button>
				       </span>
				    </div>
			    </form>
	      	
		<c:forEach items="${pageModel.list }" var="position" varStatus="vs">
		    		<div class="panel panel-primary">
					  <div class="panel-heading">
					    <h3 class="panel-title"><strong> &nbsp; ${position.company$name }</strong>&nbsp;&nbsp;"${position.company$slogan }"</h3>
					  </div>
					  <div class="panel-body">
					       <a href="<%=request.getContextPath() %>/PositionServlet?command=detail&id=${position.id}">${position.name }</a> &nbsp;&nbsp; ￥${position.salary1 }~${position.salary2 } &nbsp;&nbsp; ${position.company$address } &nbsp;&nbsp; <fmt:formatDate value="${position.releaseTime }" pattern="yyyy-MM-dd HH:mm:ss"/>
					  </div>
					</div>
		        </c:forEach>
		        <div class="append"></div>
			 <div class="pull-right">
		        	<button type="button" class="btn btn-default" onclick="go(${pageModel.first })" <c:if test="${pageModel.pageNo == pageModel.first }">disabled="disabled"</c:if>>首页</button>
		        	<button type="button" class="btn btn-default" onclick="go(${pageModel.pre })" <c:if test="${pageModel.pageNo == pageModel.first }">disabled="disabled"</c:if>>上一页</button>
		        	<select onchange="go(this.value)" class="select">
		        		<script>
		        			var totalPage = '${pageModel.totalPage }';
		        			var pageNo = '${pageModel.pageNo}'
		        			for (var i = 1; i <= totalPage; i++) {
		        				if (i == pageNo) {
		        				   document.write('<option value="'+ i +'" selected>第' + i +'页</option>');
		        				} else {
		        				   document.write('<option value="'+ i +'">第' + i +'页</option>');	
		        				}
		        			}
		        		</script>
		        	</select>
		        	<button type="button" class="btn btn-default" onclick="go(${pageModel.next })" <c:if test="${pageModel.pageNo == pageModel.last }">disabled="disabled"</c:if>>下一页</button>
		        	<button type="button" class="btn btn-default" onclick="go(${pageModel.last })" <c:if test="${pageModel.pageNo == pageModel.last }">disabled="disabled"</c:if>>尾页</button>
		        	&nbsp;&nbsp;&nbsp;&nbsp;
		        	<c:if test="${((pageModel.pageNo - 1) * pageModel.pageSize + pageModel.pageSize)< pageModel.totalRecords}">
		        	当前第${pageModel.pageNo }页，
		        	显示${(pageModel.pageNo - 1) * pageModel.pageSize + 1}到第${(pageModel.pageNo - 1) * pageModel.pageSize + pageModel.pageSize}，共${pageModel.totalPage }页
		        	</c:if>
		        	
		        	<c:if test="${((pageModel.pageNo - 1) * pageModel.pageSize + pageModel.pageSize)> pageModel.totalRecords}">
		        	当前第${pageModel.pageNo }页，
		        	显示${(pageModel.pageNo - 1) * pageModel.pageSize + 1}到第${pageModel.totalRecords}，共${pageModel.totalPage }页
		        	</c:if>
		        </div>
			</c:if>
    	</div>
    	
    	<script>
    		/**
    		 * 指定跳转到第几页
    		 */
    		 var searchForm = $('#searchForm')[0];
    		function go(pageNo) {
    			searchForm.action='<%=request.getContextPath()%>/CommonServlet?command=toMainUI&pageNo='+pageNo
    			searchForm.submit();
    		}
    		
    		var scrollHeight = document.body.scrollHeight || document.documentElement.scrollHeight;
			var windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
			var flag = true;
			var judge=true;
			var pageNo=parseInt('${pageModel.next}');
			var totalPage=parseInt('${pageModel.totalPage}');
			var searchText=$('#searchText')[0].value;
			window.onscroll = function() {
				var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
				if(scrollHeight - (scrollTop + windowHeight) <= 50 && flag) {
					flag = false;
					$.get('<%=request.getContextPath()%>/CommonServlet?command=loadingData&pageNo='+pageNo+'&searchText='+searchText+'&time=' + new Date().getTime(), function(datas) {
						var html = [];
						if(pageNo < totalPage){
						for (var i = 0; i < datas.list.length; i++) {
							html.push('<div class="panel panel-primary">');
							html.push('  <div class="panel-heading">');
							html.push('    <h3 class="panel-title"><strong> &nbsp; ' + datas.list[i].company$name + '</strong>&nbsp;&nbsp;"' + datas.list[i].company$slogan + '"</h3>');
							html.push('  </div>');
							html.push('  <div class="panel-body">');
							html.push('    <a href="<%=request.getContextPath() %>/PositionServlet?command=detail&id='+datas.list[i].id+'">' + datas.list[i].name + '</a> &nbsp;&nbsp; ￥' + datas.list[i].salary1 + '~' + datas.list[i].salary2 + ' &nbsp;&nbsp; ' + datas.list[i].company$address + ' &nbsp;&nbsp;'+ datas.list[i].releaseTime+'');
							html.push('  </div>');
							html.push('</div>');
							}
						judge=true;
						}else if(pageNo == totalPage){
							html.push('<div class="panel panel-primary">');
							html.push('  <div class="panel-heading">');
							html.push('    <h3 class="panel-title"><strong> &nbsp; ' + datas.list[0].company$name + '</strong>&nbsp;&nbsp;"' + datas.list[0].company$slogan + '"</h3>');
							html.push('  </div>');
							html.push('  <div class="panel-body">');
							html.push('    <a href="<%=request.getContextPath() %>/PositionServlet?command=detail&id='+datas.list[0].id+'">' + datas.list[0].name + '</a> &nbsp;&nbsp; ￥' + datas.list[0].salary1 + '~' + datas.list[0].salary2 + ' &nbsp;&nbsp; ' + datas.list[0].company$address + ' &nbsp;&nbsp;'+ datas.list[0].releaseTime+'');
							html.push('  </div>');
							html.push('</div>');
							html.push('<div class="alert alert-warning text-center" role="alert">没有了！</div>');
						judge=false;
						
						}
						$('.append').append(html.join(''));
						scrollHeight = document.body.scrollHeight || document.documentElement.scrollHeight;
						pageNo=datas.next;
						flag = true;
						if(judge==false){
							flag = false;
						}
					}, 'json');
				} 
			}
    	</script>
    </body>
</html>
